<template>
    <div slot="left" id="word-content-container">
        <div id="word-content" style="direction: ltr;">
            <h2 :style="{direction: languageDirection.sourceRtl ? 'rtl' : 'ltr'}"><span v-for="(word, wordIndex) in lintWordsWithOddWord(keyWord, item)" :key="wordIndex" :class="{'colored': wordIndex % 2 != 0}">{{ word }}</span></h2>
            <h3 :style="{direction: languageDirection.destinationRtl ? 'rtl' : 'ltr'}">{{item.value}}</h3>
        </div>
        <div id="content-action">
            <ButtonGroup vertical>
                <Button icon="md-star" @click="showSignInDialog=true"/>
                <Button icon="md-volume-up"/>
                <Button icon="md-copy" />
                <Button icon="ios-bug" />
            </ButtonGroup>
        </div>
    </div>
</template>


<style lang="scss" scoped>
$primary-color: #3ba776;

#word-content {
  &-container {
    display: flex;
    flex-direction: row;
    // background-color:blue;
    height: 100%;
  }

  // background-color: red;
  flex-grow: 1;
  height: 100%;
  padding: 20px;
  margin: 0;
}

#content-action {
  // width: 40px;
  // border-right: {
  //     style: solid;
  //     width: 1px;
  //     color: rgb(235, 235, 235);
  // }
  padding: 10px;
}
.colored {
    color: $primary-color;
}
</style>

<script>

import lintWordsWithOddWord from "./linter"

export default {
    components: {
        
    },
    props: {
        item: {
            type: Object,
            required: true,
            validator: value => {
                let valid = value.key != undefined
                valid &= value.value != undefined

                if (!valid) throw new Error("Object must be there fields: {key: String, value: String")

                return valid
            }
        },
        keyWord: {
            type: String,
            required: true
        },
        languageDirection: {
            type: Object,
            required: true
        }
    },
    data(){
        return {
            showSignInDialog: false
        }
    },
    methods: {
        lintWordsWithOddWord,
    }
}
</script>
